<!DOCTYPE html>
<html>
<head>
<title>Blogger Comment Editor</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://hompimpa.googlecode.com/svn/trunk/Text-Editor/js/script.js"></script>
<style type="text/css">
/* Main Styler by Taufik Nurrohman - Please do not use this code without permission from the developer */
* {
  margin:0px 0px;
  padding:0px 0px;
}

@font-face {
  font-family:'Ubuntu';
  font-style:normal;
  font-weight:normal;
  src:local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}

html {
  overflow-y:scroll;
}

*:focus {
  outline:none;
}

body {
  background-color:#2f2f2f;
  text-align:center;
  line-height:1.5em;
  font:small 'Ubuntu','Trebuchet MS',Verdana,Arial,Sans-serif;
  color:#333;
}

a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

/* Komentar */
#comments {
  padding:20px 30px 30px;
  margin:70px auto 120px;
  color:white;
  text-align:left;
}

/* Manipulation + CSS Fallback */
#comments .note {
  display:block;
  padding:5px 10px;
  border:1px solid black;
  background-color:#222;
  background-image:-webkit-linear-gradient(top,#333,#222);
  background-image:-moz-linear-gradient(top,#333,#222);
  background-image:-ms-linear-gradient(top,#333,#222);
  background-image:-o-linear-gradient(top,#333,#222);
  background-image:linear-gradient(top,#333,#222);
  -webkit-box-shadow:0px 0px 0px 1px #555;
  -moz-box-shadow:0px 0px 0px 1px #555;
  box-shadow:0px 0px 0px 1px #555;
  color:#ccc;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  text-shadow:0px 1px 0px black;
}

#comments .note a,
#comments .note code {
  font-size:11px;
}

#comments img.incomment {
  display:block;
  margin:2px auto 0px;
}

#comments a,
#comments i[rel="anchor"] {
  color:#5687B8;
  font-style:normal;
}

#comments a.anchor {
  font-size:96%;
}

#comments pre,
#comments i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",Courier,monospace !important;
  padding:0.5em 0.5em 0.5em 1em;
  background-color:#002b36;
  border-left:4px solid #268bd2;
  position:relative;
  overflow:auto;
  white-space:pre;
  word-wrap:normal !important;
}

#comments code,
#comments i[rel="code"] {
  color:white;
  font:normal 12px Monaco,'Courier New',Monospace;
}

#comments code a {
  color:white;
}

#comments code a:hover {
  background:transparent;
}

#comments blockquote,
#comments b[rel="quote"] {
  display:block;
  font-weight:normal;
  position:relative;
  background-color:#5D73B5;
  color:white;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  text-shadow:0 1px 0 rgba(0,0,0,0.2);
  margin:.75em 0;
  padding:15px 20px;
}

#comments blockquote a,
#comments blockquote a:visited {
  color:#FFEAE5!important;
}

#comments blockquote:before,
#comments b[rel="quote"]:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  bottom:100%;
  right:15px;
  border-color:transparent transparent #5D73B5;
  border-style:solid;
  border-width:7px;
}

#comments iframe {
  width:320px;
  max-width:320px;
  height:224px;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  display:block;
  margin:10px auto 10px;
  border:4px solid #444;
}

.cm_wrap {
  clear:both;
  margin:0px auto 4px;
  width:700px;
  position:relative;
}

.cm_head {
  margin:0;
  width:58px;
  position:absolute;
  top:0px;
  left:0px;
}

.comments .avatar-image-container {
  margin:0px 0px 3px;
  vertical-align:middle;
  border:1px solid #3c3c3c;
  padding:4px;
  width:45px !important;
  height:45px !important;
  -webkit-box-shadow:0px 1px 2px black;
  -moz-box-shadow:0px 1px 2px black;
  box-shadow:0px 1px 2px black;
}

.comments .avatar-image-container .img {
  display:block;
  float:left;
  width:45px !important;
  height:45px !important;
  background:black url('../images/male-user.png') no-repeat 50% 50%;
}

.comments .avatar-image-container .img:hover {
  opacity:0.7;
}

.cm_reply {}

.cm_reply a {
  display:block;
  width:auto;
  margin:0px 0px 1px -2px;
  text-decoration:none;
  padding:2px 7px 3px;
  text-transform:none;
  color:white !important;
  background-color:#527915;
  background-image:-webkit-linear-gradient(top,#64931C,#527915);
  background-image:-moz-linear-gradient(top,#64931C,#527915);
  background-image:-ms-linear-gradient(top,#64931C,#527915);
  background-image:-o-linear-gradient(top,#64931C,#527915);
  background-image:linear-gradient(top,#64931C,#527915);
  font:normal 10px Tahoma,Verdana,Arial,Sans-Serif;
  -webkit-box-shadow:0px 2px 2px black;
  -moz-box-shadow:0px 2px 2px black;
  box-shadow:0px 2px 2px black;
  -webkit-border-radius:3px 0px 0px 3px;
  -moz-border-radius:3px 0px 0px 3px;
  border-radius:3px 0px 0px 3px;
}

.cm_reply a:hover,
.cm_reply a:focus,
.cm_reply a.clicked {
  margin:0px 0px 1px -6px;
  padding:2px 10px 3px 7px;
}

.cm_reply a:focus,
.cm_reply a.clicked {
  background-color:#890586;
  background-image:-webkit-linear-gradient(top,#890586,#5F085D);
  background-image:-moz-linear-gradient(top,#890586,#5F085D);
  background-image:-ms-linear-gradient(top,#890586,#5F085D);
  background-image:-o-linear-gradient(top,#890586,#5F085D);
  background-image:linear-gradient(top,#890586,#5F085D);
}

.cm_reply a:active {
  background-image:-webkit-linear-gradient(bottom,#64931C,#527915);
  background-image:-moz-linear-gradient(bottom,#64931C,#527915);
  background-image:-ms-linear-gradient(bottom,#64931C,#527915);
  background-image:-o-linear-gradient(bottom,#64931C,#527915);
  background-image:linear-gradient(bottom,#64931C,#527915);
}

.cm_entry {
  margin-left:58px;
  padding:16px 16px 16px;
  border:1px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:0px 1px 2px black;
  -moz-box-shadow:0px 1px 2px black;
  box-shadow:0px 1px 2px black;
  overflow:hidden;
  position:relative;
}

.cm_entry div.komentar-spam {
  padding:5px 10px 10px;
  margin:2px 0px 0px;
  clear:both;
  border:1px solid #555;
  background-color:#444;
  word-wrap:break-word;
  cursor:text;
  line-height:1.4em;
  min-height:20px;
}

.cm_info {
  border:1px solid #555;
  background-color:#444;
  padding:5px 10px;
  margin:0px 0px 2px;
}

.cm_name {
  font-weight:bold;
  text-decoration:none;
  float:left;
}

.cm_date {
  font-size:10px;
  color:#999;
  text-decoration:none;
  float:right;
}

#editor {
  background-color:rgba(0,0,0,0.4);
  border-bottom:1px solid black;
  padding:10px 15px;
  height:30px;
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  left:100px;
  z-index:999;
}

#editor a {
  color:white;
  text-decoration:none;
}

#editor ul,
#editor li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#editor-mode ul {
  background-color:#333;
  overflow:hidden;
}

#editor-mode li {
  float:left;
}

#editor-mode li a,
#editor-mode li .anc {
  display:block;
  font:bold 12px/30px Arial,Sans-Serif;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  padding:0px 20px;
  margin:0px 2px 0px 0px;
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  border:1px solid #111;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  position:relative;
}

#editor li .anc input {
  border:1px solid #333;
  padding:2px 5px;
  display:inline;
  margin:0px 0px;
  font:bold 12px Arial,Sans-Serif;
}

#editor-mode li a:hover,
#editor-mode li a.active {
  text-decoration:none;
  background-color:#900;
}

#editor-mode li .anc .tooltip {
  cursor:pointer;
  background-color:#F7E794;
  border:1px solid #DE8C31;
  position:absolute;
  top:100%;
  right:-50px;
  left:0px;
  z-index:999;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  color:black;
  padding:10px;
  line-height:normal;
  text-align:left;
  margin-top:20px;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  display:none;
}
#editor-mode li .anc .tooltip:before,
#editor-mode li .anc .tooltip:after {
  content:"";
  width:0px;
  height:0px;
  border:10px solid transparent;
  border-bottom-color:#DE8C31;
  position:absolute;
  top:-20px;
  left:20px;
}
#editor-mode li .anc .tooltip:after {
  border-bottom-color:#F7E794;
  border-width:8px;
  top:-16px;
  left:22px;
}
#editor-mode li .anc input:focus + .tooltip {
  display:none !important;
}

textarea#htmlsource {
  width:606px;
  display:block;
  margin:0px auto 0px;
  min-height:400px;
  border:1px solid #555;
  background-color:#111;
  font:normal 12px 'Courier New',Monospace;
  color:#aaa;
  cursor:text;
}

#tool {
  float:right;
}

#edit {
  width:100px;
  position:fixed !important;
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  z-index:999;
  margin:0px 0px;
  padding:0px 0px;
  background-color:#222;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  border-top:20px solid #333;
  border-right:2px solid #333;
}
#edit li {list-style:none;margin:0px 0px;padding:0px 0px;}
#edit a {
  display:block;
  text-align:right;
  font:bold 11px/20px Arial,Sans-Serif;
  text-decoration:none;
  color:white;
  background-color:#222;
  background-image:-webkit-linear-gradient(top,#333,#222);
  background-image:-moz-linear-gradient(top,#333,#222);
  background-image:-ms-linear-gradient(top,#333,#222);
  background-image:-o-linear-gradient(top,#333,#222);
  background-image:linear-gradient(top,#333,#222);
  padding:0px 15px;
}
#edit a:active {
  background-color:#000;
  background-image:-webkit-linear-gradient(top,#000,#333);
  background-image:-moz-linear-gradient(top,#000,#333);
  background-image:-ms-linear-gradient(top,#000,#333);
  background-image:-o-linear-gradient(top,#000,#333);
  background-image:linear-gradient(top,#000,#333);
}

.clear {
  clear:both;
}

.hidden {
  display:none;
}
</style>
</head>
<body spellcheck="false">
<div id="editor">
	<ul id="editor-mode">
     <li style="display:none;"><form action="#" class="anc" id="balas"><input type="text" id="userID" placeholder="Sisipkan userID"/><span class="tooltip" title="Dismiss">Jangan lupa untuk menyisipkan userID jika Anda merancang komentar yang akan Anda gunakan sebagai balasan dari komentar seseorang di blog.<br>Misal: <strong>@&lt;a href=&quot;#c2233&quot&gt;Nama&lt;/a&gt;</strong></span></form></li>
		<li><a id="render" href="#main">Konversi Tampilan</a></li>
	</ul>
	<h2 style="position:absolute;top:12px;right:15px;font-weight:normal;color:#999;">EDITOR KOMENTAR VIRTUAL</h2>
</div>
<div id="comments" class="comments">
	<div class="cm_wrap" id="main">
		<div class="cm_head">
			<div class="cm_avatar">
				<div class="avatar-image-container vcard">
					<div class="img"></div>
				</div>
			</div>
			<div class="cm_reply">
           <a style="display:none;" class="answer-this-comment" href="#" target="_blank">Balas</a>
				<a id="comment-delete" href="#" title="Reset Komentar">Bersihkan</a>
			</div>
		</div>

		<div class="cm_entry">
			<div class="cm_info">
				<div class="cm_name">
					<a href="#" rel="nofollow" target="_blank">Contoh Nama Komentator</a>
				</div>
				<div class="cm_date">
				Minggu, 06 Mei 2012 04:57:00 WIB <a href="#c1234567" title="comment permalink">Permalink</a>
				</div>
				<div class="clear"></div>
			</div>
			<div title="Edit" id="textPreview" class="komentar-spam toggle" contenteditable="true">Alat ini dibuat bukan sebagai konverter standar komentar <b>Blogger</b>, namun hanya sebagai media pembiasaan menulis kode pada peraturan manipulasi yang Saya buat sendiri di blog Saya <a class="anchor" href="http://hompimpaalaihumgambreng.blogspot.com">[Link]</a><br><br>Hanya sebagai tempat bermain-main/pemanasan sebelum menulis komentar (sebagai sarana peningkatan rasa percaya diri untuk memulai diskusi/menjawab pertanyaan)<br>Kemungkinan kesalahan konversi masih ada, jadi tetaplah pertahankan metode menulis secara manual, meskipun di sisi lain alat ini sebenarnya juga bisa digunakan untuk pembantu.<br>Sampel kode <code>&lt;taufik title="pelajar" onblur="selebritis" onfocus="super hahay"&gt;</code><br><br><pre>function hahay() {
    var taufik = confirm("Apakah Anda Taufik?");
    if(taufik) {
        alert("HAHAY!");
    } else {
        window.open("","","top=0,left=0,status=single");
    }
}</pre><br/><br/><cite class="note"><b>Catatan:</b> Bahwasanya ketika Anda sedang dilanda kesulitan, maka walau bagaimanapun juga seekor siput akan sampai pada tempat tujuan tanpa harus meninggalkan/melepaskan rumahnya - <i>10 Mei 2012</i></cite><br/><br/><img class="incomment" src="http://2.bp.blogspot.com/-PI8Zuo2jM4o/T2vhCXeHo5I/AAAAAAAACXQ/iQU5joOKp4o/s1600/my-comment-author.png"><br/><br/><blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</blockquote></div>
			<textarea spellcheck="false" id="htmlsource" contenteditable="true" class="toggle hidden"></textarea>
		</div>
	</div>

</div>

<aside>
<ul id="edit">
	<li><a href="#" class="icon link">&lt;a&gt;</a></li>
	<li><a href="#" class="icon image">&lt;img&gt;</a></li>
	<li><a href="#" class="icon code">&lt;code&gt;</a></li>
	<li><a href="#" class="icon pre">&lt;pre&gt;</a></li>
	<li><a href="#" class="icon blockquote">&lt;blockquote&gt;</a></li>
	<li><a href="#" class="icon note">[note]</a></li>
</ul>
</aside>
</body>
</html>